File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React from "react";
import Table from "../../component/Table.jsx";
import Button from "../../component/Button.jsx";
import SubTitle from "../../component/SubTitle.jsx";
import Modal from "../../component/Modal.jsx";
export default function UserAuthoriySelect() {
const [modalOpen, setModalOpen] = React.useState(false);
const openModal = () => {
setModalOpen(true);
};
const closeModal = () => {
setModalOpen(false);
};
const thead1 = [
"No",
"사용자관리번호",
"관리기관",
"이름",
"성별",
"지역",
"연락처",
"주소",
];
const key1 = ["No",
"management_number",
"level_of_care",
"name",
"gender",
"birth",
"phone",
"address",];
const content1 = [
{
No: 1,
management_number: 2022080101,
level_of_care: "A복지관",
name: "김복남",
gender: "남",
birth: "대구",
phone: "010-1234-1234",
address: "경상북도 군위군 삼국유사면",
},
];
const thead2 = [
"No",
"보호자명",
"ID",
"관리기관",
"해당 대상자",
"연락처",
];
const key2 = [
"No",
"name",
"Id",
"management_agency",
"phone",
"birth",
];
const content2 = [
{
No: 1,
name: "김훈",
Id: "admin2",
management_agency: "보호재단",
phone: "김복남 어르신",
birth: "010-1234-1234",
},
];
const thead3 = [
"No",
"기관명",
"사업자번호",
"ID",
"담당자",
"연락처",
"주소",
];
const key3 = [
"No",
"name",
"birth",
"Id",
"management_agency",
"gender",
"address",
];
const content3 = [
{
No: 1,
name: "보훈병원",
birth: " 515-82-00000",
Id: "admin",
management_agency: "홍길동",
gender: "053-818-8181",
address: "대구광역시 달성군 ",
},
];
const thead4 = [
"No",
"담당자명",
"소속기관",
"ID",
"연락처",
"주소",
];
const key4 = [
"No",
"name",
"birth",
"Id",
"management_agency",
"address",
];
const content4 = [
{
No: 1,
name: "홍길동",
birth: " 대구보훈병원",
Id: "admin",
management_agency: "053-818-8181",
address: "대구광역시 달성군 ",
},
];
const thead5 = [
"No",
"장비명",
"시리얼 넘버",
"기기 상태",
"구매일",
"배터리 잔량",
"대여가능여부",
];
const key5 = ["No",
"equipment_name",
"serialNumber",
"work",
"name",
"battery",
"rental",];
const content5 = [
{
No: 1,
equipment_name: "스마트약상자",
serialNumber: "ABCD-1",
work: "작동",
name: "2022.12.02",
battery: "10%",
rental: "대여가능",
},
];
const data = [
{
id: 1,
title: "사용자",
description: (
<Table
className={"protector-user"}
head={thead1}
contents={content1}
contentKey={key1}
onClick={() => {
navigate("/SeniorSelectOne");
}}
/>
),
},
{
id: 2,
title: "보호자(가족)",
description: (
<Table
className={"caregiver-user"}
head={thead2}
contents={content2}
contentKey={key2}
onClick={() => {
navigate("/SeniorSelectOne");
}}
/>
),
},
{
id: 3,
title: "계약업체",
description: (
<Table
className={"common-user"}
head={thead3}
contents={content3}
contentKey={key3}
onClick={() => {
navigate("/SeniorSelectOne");
}}
/>
),
},
{
id: 4,
title: "복지사, 간호사",
description: (
<Table
className={"common-user"}
head={thead3}
contents={content3}
contentKey={key3}
onClick={() => {
navigate("/SeniorSelectOne");
}}
/>
),
},
{
id: 5,
title: "관리자",
description: (
<Table
className={"management-user"}
head={thead4}
contents={content4}
contentKey={key4}
onClick={() => {
navigate("/SeniorSelectOne");
}}
/>
),
},
];
const [index, setIndex] = React.useState(1);
return (
<main>
<Modal open={modalOpen} close={closeModal} header="대상자 매칭">
<div className="board-wrap">
<div className="flex margin-bottom2">
<div className="flex50">
<div className="flex margin-bottom">
<input
type="text"
name=""
id=""
className="flex80"
placeholder="사용자 검색"
/>
<Button btnName={"검색"} className={"flex20"} />
</div>
<ul className="user-list2">
<li>검색 내역이 없습니다.</li>
</ul>
</div>
<div className="flex50">
<div className="flex margin-bottom">
<p className="content-title">선택된 대상자</p>
</div>
<ul className="user-check-list">
<div className="flex-start">
<input type="text" />
<label htmlFor=""></label>
</div>
</ul>
</div>
</div>
<div>
<Button
className={"btn-100 green-btn"}
btnName={"등록"}
onClick={closeModal}
/>
</div>
</div>
</Modal>
<div className="flex">
<div className="tab-container">
<div className="category">
<ul>올잇메디 <Button
className={"category-btn"}
btnName={"관리기관 추가"}
onClick={closeModal}
/>
<li>서구청<Button
className={"category-btn"}
btnName={"시행기관 추가"}
onClick={closeModal}
/>
<ul>
<li>A복지관</li>
<li>B복지관</li>
</ul>
</li>
<li>보훈병원<Button
className={"category-btn"}
btnName={"시행기관 추가"}
onClick={closeModal}
/></li>
<ul>
<li>
대구보훈병원
</li>
</ul>
<li>관리기관<Button
className={"category-btn"}
btnName={"시행기관 추가"}
onClick={closeModal}
/>
<ul>
<li>시행기관1</li>
<li>시행기관2</li>
</ul>
</li>
</ul>
</div>
</div>
<div className="tab-container">
<ul className="tab-menu-mobile">
<div>
<SubTitle
className="margin-bottom"
subtitle={"사용자 선택"}
explanation={"사용자 별로 선택 후 관리할 수 있습니다. "}
/>
</div>
<select name="" id="" style={{ width: "100%" }}>
<option value="사용자선택">보호자</option>
<option value="사용자선택">보호사</option>
<option value="사용자선택">병원</option>
<option value="사용자선택">지자체</option>
<option value="사용자선택">관리자</option>
</select>
</ul>
<ul className="tab-menu">
{data.map((item) => (
<li
key={item.id}
className={index === item.id ? "active" : null}
onClick={() => setIndex(item.id)}
>
{item.title}
</li>
))}
</ul>
<div className="content-wrap">
<div className="search-management flex-end margin-bottom2">
<select name="management-agency">
<option value="기관전체">기관전체</option>
<option value="대구보훈병원">대구보훈병원</option>
<option value="군위군청">군위군청</option>
</select>
<select>
<option value="이름">이름</option>
<option value="아이디">아이디</option>
</select>
<input type="text" />
<Button
className={"btn-small gray-btn"}
btnName={"검색"}
onClick={() => navigate("/SeniorInsert")}
/>
</div>
<ul className="tab-content">
{data
.filter((item) => index === item.id)
.map((item) => (
<li>{item.description}</li>
))}
</ul>
</div>
</div>
</div >
</main>
);
}